<!--
 * @Author: WangGuojian 1085844536@qq.com
 * @Date: 2023-08-13 10:18:11
 * @LastEditTime: 2023-08-13 10:55:37
 * @LastEditors: WangGuojian 1085844536@qq.com
 * @FilePath: \htmld:\Developer\WGJ\VSCode_WorkSpace\Web\vue\vue-basic\15-内置指令\3.v-cloak_指令.html
 * @Description:
-->
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>v-cloak指令</title>
        <style>
            [v-cloak] {
                display: none;
            }
        </style>
    </head>
    <body>
        <!--
            v-cloak指令（没有值）
                1.本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性
                2.使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题
         -->
        <!-- 准备好一个容器 -->
        <div id="root">
            <h2 v-cloak>你好，{{name}}</h2>
        </div>
        <script
            type="text/javascript"
            src="http://localhost:8080/resource/5s/vue.js"
        ></script>
    </body>
    <script type="text/javascript">
        console.log(1);
        Vue.config.productionTip = false;

        new Vue({
            el: '#root',
            data: {
                name: '尚硅谷',
            },
        });
    </script>
</html>
